<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新东方顶部导航菜单</title>
    <style>
       *{
           margin: 0;
           padding: 0;
       }
       .wai{
           width: 600px;
           height: 27px;
           background-image: url(image/top_bg.gif);
           border-bottom: 1px dashed #ccc;
       }
       .nei{
           padding: 3px 10px;
           float: right;
           ;
       }
       img{
           margin-left: 10px;
       }
       a{
           text-decoration: none;
           padding-right:15px;
           font-size: 12px;
           color: gray;
           border-right: 1px solid gray;
       }
       #daohang a{
           border-right: none;
           
       }
       #daohang{
           position: relative;

       }
       .biao{
           position: absolute;
           right: 15px;
           top: 10px;
       }
       .nei1{
           border: gray solid 1px;
           padding: 2px;
           position: absolute;
           right: 15px;
           top: 20px;
           width: 200px;
           background-color: white;
           display: none;
       }
       .nei2{
             padding: 4px 2px;
            overflow: hidden;

       }
       
       ul{
           list-style: none;
       }
       li{
           float: left;
           padding: 2px;
           font-size: 12px;
           color: gray;
           margin-right: 8px;
       }
       #nei2{
           border-top: 1px solid gray;
           border-bottom: 1px solid gray;
       }
       #daohang:hover .nei1{
           display: block;

       }
    </style>
</head>
<body>
    <div class="wai">
        <img src="image/logo.gif" alt="">
        <div class="nei" id="daohang"><a>网站导航</a>
        <img src="image/open_icon.gif" alt="" class="biao">
        <div class="nei1">
            <div class="nei2">
                <ul>
                    <li>托福</li>
                    <li>雅思</li>
                    <li>考研</li>
                    <li>职称英语</li>
                    <li>初中</li>
                    <li>日语</li>
                </ul>
            </div>
            <div class="nei2" id="nei2">
                <ul>
                    <li>网络课堂 </li>
                    <li>资讯中心 </li>
                    <li>知识堂</li>
                    <li>大师讲坛</li>
                    <li>学习论坛</li>
                    <li>学词</li>
                    <li>考研搜校</li>
                </ul> </div>
            <div class="nei2">
                <ul>
                    <li>M-Zone </li>
                    <li>手机报</li>
                    <li>时时英语</li>
                </ul>
            </div>
        </div>
    </div>
        <div class="nei"><a>手机报</a></div>
        <div class="nei"><a>各地购课</a></div>
        <div class="nei"><a>快速注卡</a></div>
        <div class="nei"><a>优惠券</a></div>
        <div class="nei"><a>购物车</a></div>
    </div>
</body>
</html>